﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Title -->
    <title>XK-Blog</title>

    <!-- /favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="/assets1/css/bootstrap.min.css">

    <!--矢量图标-->
    <link rel="stylesheet" href="/style/icon/icon.css">

    <!-- Font awesome CSS -->
    <link rel="stylesheet" href="/assets1/css/font-awesome.min.css">

    <!-- Animate CSS -->
    <link rel="stylesheet" href="/assets1/css/animate.min.css">

    <!-- OwlCarousel CSS -->
    <link rel="stylesheet" href="/assets1/css/owl.carousel.css">

    <!-- SlickNav CSS -->
    <link rel="stylesheet" href="/assets1/css/slicknav.min.css">

    <!-- Magnific popup CSS -->
    <link rel="stylesheet" href="/assets1/css/magnific-popup.css">

    <!-- Main CSS -->
    <link rel="stylesheet" href="/assets1/css/style.css">

    <!-- Responsive CSS -->
    <link rel="stylesheet" href="/assets1/css/responsive.css">

</head>
<body>

<!-- 头部图片logo 开始 -->
<section  th:replace="~{common/blogHead :: blogHead}">
</section>
<!-- 头部图片logo 结束 -->

<!-- 头部菜单 开始-->
<section  th:replace="~{common/blogMenu :: blogMenu}">
</section>
<!-- 头部菜单 结束 -->


<!-- 滑块轮播图 开始 -->
<section class="rapid-slider-post-area">
    <div class="post-slider">
        <div th:each="articleSlider : ${articleSliderList}" class="single-post-slide">
            <img  th:src="@{'/assets/img/' + ${articleSlider.image}}" alt="post slider"/>
            <div class="post-slider-content">
                <div class="category-links">
                    <a th:href="${'/category/' + articleSlider.category.id}" th:text="${articleSlider.category.categoryName}"></a>
                </div>
                <h2><a th:href="${'/article/' + articleSlider.id}" th:text="${articleSlider.title}"></a></h2>
                <div class="post-meta">
                    <ul>
                        <li th:text="${#dates.format(articleSlider.releaseDate, 'yyyy-MM-dd')}"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- 滑块轮播图 结束 -->


<!-- 内容区域起始 -->
<section class="rapid-Allpost-area section_50">
    <div class="container">
        <div class="row">
            <div class="col-md-9">
                <div class="blog-page-left">
                    <div th:each="article : ${articleList}" class="single-blog">
                        <div class="blog-image">
                            <a  th:href="'/article/'+ ${article.id}">
                                <img th:src="@{'/assets/img/' + ${article.image}}" alt="blog"/>
                            </a>
                        </div>
                        <div class="blog-text">
                            <div class="post-cat">
                                <p th:text="${article.category.categoryName}"></p>
                            </div>
                            <h2><a th:text="${article.title}" th:href="'/article/'+ ${article.id}"></a></h2>
                            <div class="blog-meta">
                                <ul>
                                    <li th:text="'-:' + ${#dates.format(article.releaseDate, 'yyyy-MM-dd HH:mm:ss')}"></li>
                                    <li><a th:text="${article.user.userName}" href="#"></a></li>
                                    <li><a th:href="'/article/'+ ${article.id}" >  <span th:text="${article.countComment}"></span><i class="fa fa-comments-o"></i></a></li>
                                </ul>
                            </div>
                            <div th:utext="${article.content}" class="post-content post-content-index">
                            </div>
                            <a th:href="'/article/'+ ${article.id}" class="rapid-btn">阅读更多</a>
                            <div class="share-button-social">
                                <a href="#"><i class="fa fa-facebook"></i></a>
                                <a href="#"><i class="fa fa-twitter"></i></a>
                                <a href="#"><i class="fa fa-google-plus"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--分页 开始-->
                <div class="pagination_box" th:utext="${pageCode}">
                   <!-- <ul class="pagination">
                        <li><a href="#"><i class="fa fa-angle-left"></i></a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#"><i class="fa fa-angle-right"></i></a></li>
                    </ul>-->
                </div>
                <!--分页 结束-->
            </div>
            <!--右侧主内容开始-->
            <div  th:replace="~{common/blogRight :: blogRight}"></div>
            <!--右侧主内容结束-->
        </div>
    </div>
</section>
<!-- 内容区域结束 -->


<!-- 页脚区域开始 -->
<footer th:replace="~{common/blogDown :: blogDown}">
</footer>
<!-- 页脚区域结束 -->


<!-- jQuery -->
<script src="/assets1/js/jquery.min.js"></script>

<!-- Bootstrap JS -->
<script src="/assets1/js/bootstrap.min.js"></script>

<!-- Magnific Popup JS -->
<script src="/assets1/js/jquery.magnific-popup.min.js"></script>

<!-- OwlCarousel JS -->
<script src="/assets1/js/owl.carousel.min.js"></script>

<!-- SlickNav JS -->
<script src="/assets1/js/jquery.slicknav.min.js"></script>

<!-- Custom JS -->
<script src="/assets1/js/custom.js"></script>

<!--全局\退出js-->
<script src="/assets1/js/common.js"></script>

<script>
    $(function () {
        $("[data-toggle='popover']").popover();
    });

    <!--已有窗口跳转（避免创建多个重复窗口）(抖音，小红书跳转)-->
    const windows = {};  // 用于存储打开的窗口

    $('.external-link').on('click', function(e) {
        e.preventDefault();

        const url = $(this).attr('href');  // 获取链接目标 url
        const name = url.replace(/\W/g, '');  // 移除非字母数字字符用作窗口名称

        // 如果窗口未打开，或者窗口已经被关闭，则重新打开窗口
        if (typeof windows[name] == 'undefined' || windows[name].closed) {
            windows[name] = window.open(url, name);
        } else {
            windows[name].focus();  // 否则，让已打开的窗口获取焦点
        }
    });

    //2、 在点击分页链接时保存滚轮位置
    $(document).on('click', '.pagination a', function(e) {
        e.preventDefault();

        const url = $(this).attr('href');
        const scrollPos = $(window).scrollTop();
        disablePageForLoading(); // 禁用页面的函数，避免滚动

        $.ajax({
            url: url,
            success: function(newContent) {
                enablePageAfterLoading(); // 启用页面的函数，允许滚动
                insertNewContent(newContent); // 插入新内容到页面的函数
                $(window).scrollTop(scrollPos);
            }
        });
    });

    <!--3、切换分页时保存滚轮位置-->
    function keepScrollPos(url) {
        //存储滚动位置
        const scrollPos = $(window).scrollTop();
        localStorage.setItem('scrollPos', scrollPos);
        // 重定向到点击的页面
        window.location.href = url;
        return false;
    }


    $(document).ready(function() {
        $('#logoutLink').on('click', function(e) {
            e.preventDefault();
            logout();
        });

        <!--加载页面时，获取滚轮位置-->
        //1、检索滚动位置
        const scrollPos = localStorage.getItem('scrollPos');
        if (scrollPos) {
            $(window).scrollTop(scrollPos);
            localStorage.removeItem('scrollPos');
        }


        //退出登录
        $('#logoutLink').on('click', function(e) {
            e.preventDefault();

            // 发送请求到服务器执行退出登录操作
            $.ajax({
                type: 'POST',
                url: '/visitor/loginOut',
                success: function() {
                    // 如果退出成功，那么重载页面
                    location.reload();
                },
                error: function(error) {
                    console.error("Error: ", error);
                }
            });

        });
    });



</script>
<!--内联js-->
<script th:inline="javascript">
    //存储后端返回信息
    const okMessage = [[${okMessage}]];
    const errMessage = [[${errMessage}]];

    //页面加载完成后，检查是否有消息，然后显示弹窗
    window.onload = function() {
        if(okMessage !== null){
            alert(okMessage);
        }
        if(errMessage !== null){
            alert(errMessage);
        }
    };
</script>
</body>

</html>
